<template>
	<div class="recommmend_list">
		<div class="recommmend_list_section"><label>相关推荐</label></div>
		<ul ref="rcollectionView">
			<li class="mcli" v-for="(item, index) in items" v-bind:style="getCellStyle(index)">
				<a href="javascript:void(0)" @click="lookBtnClick(item.id)">
					<div class="img_back" >
						<img :src="item.thumUrl" :width="cellWidth" :height="cellWidth/133 * 177" />
						<div class="update_chapters" v-bind:style="{'width':cellWidth-1}">{{item.name}}</div>
					</div>
				</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import UserInfoManager from "../../js/UserInfoManager.js"
	import HttpUtil from "../../js/HttpUtil.js"
	import SLMUtil from "../../js/SLMUtil.js"
	
	export default {
		props: ["items"],
		data() {
			return {
				cellWidth: '133px',
				cellNum: 1,
				cellMinWidth:100 ,// 改这里记得改css
				cellSpace:8,
			}
		},
		mounted() {
			console.log("推荐列表拿到数据："+JSON.stringify(this.items))
			
			let that = this;
			this.updateCellWidth();
			window.onresize = () => {
				return (() => {
					that.updateCellWidth();
				})()
			}
		},
		beforeRouteLeave(to, from, next) {
			console.log("离开路由停止监听")
			window.onresize = null
			//离开路由停止监听
			window.removeEventListener('scroll', this.handleScroll, true);
			next();
		},
		methods: {
			lookBtnClick: function(id) {
				if (this.isEdit) {
					return;
				}
				// let url = this.rootPath + '/product/detail?productId=' + id
				// window.open(url)
	
				this.$router.push({
					path: '/WorkDetail',
					query: {
						productId: id
					}
				})
			},
			updateCellWidth: function() { //更新所有cell宽度
				let array = this.getCellFineWidth(10)
				if (array) {
					var width = array[0]
					let num = array[1]
					
					// 让最后一个漏出来1/3,除以num得出每个显示的需要割除的大小
					let needWidht = (width / 3.0) / num
					width = width - needWidht
					
					this.cellWidth = width
					this.cellNum = num
	
					console.log('每行个数:' + num + "cell宽度:" + width)
					let that = this
					this.$nextTick(() => {
						console.log("DOM 更新了,让父frame刷新高度+++++++");
						that.refreshParentHeight(parent)
					})
				}
			},
			refreshParentHeight: function(parent) {
				// if (parent) {
				// 	parent.refreshIframesHeight();
				// }
			},
			getCellFineWidth: function(num) { //获取cell最适合宽度
				if (this.$refs.rcollectionView == undefined) {
					return
				}
				let allwidth = this.$refs.rcollectionView.clientWidth // $("#collectionView").width()
				console.log("获取到collection宽度" + allwidth)
				if (typeof(allwidth) == "undefined") {
					console.log('总宽度未定义啊')
					return;
				}
				console.log('总宽度:' + allwidth)
				if (!allwidth) {
					return null;
				}
				let padding = this.cellSpace //间距
				let cellW = (allwidth - padding * (num - 1)) / num
				if (cellW >= this.cellMinWidth) {
					return [cellW, num]
				} else {
					return this.getCellFineWidth(num - 1)
				}
			},
			getCellStyle: function(index) {
				console.log('这是第一个:index:' + index + '余数:' + (index % this.cellNum))
				if (index % this.cellNum == 0) { //每行 第一个
					return {
						width: this.cellWidth + 'px',
						'margin-left': this.cellSpace +'px'
					}
				} else {
					return {
						width: this.cellWidth + 'px',
						'margin-left': this.cellSpace +'px'
					}
				}
			}
		}
	
	}
</script>

<style>
	.recommmend_list {
		width: 100%;
	}
	.recommmend_list_section {
		margin-bottom: 10px;
		text-align: left;
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #dbd9d6;
	}
	.recommmend_list_section label {
		color: #333333;
		margin-left: 8px;
		font-size: 12px;
	}
	
	.recommmend_list ul {
		width: 100%;
		overflow: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
/* 	.recommmend_list ul:-webkit-scrollbar:{
		height: 0 !important;width:0px !important;
	} */
	
	.recommmend_list ul .mcli {
		box-sizing: border-box;
		/* min-width: 100px; */
		margin-bottom: 10px;
	}
	
	.recommmend_list ul .mcli a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		color: black;
	}
	
	.recommmend_list ul .mcli .productName {
		text-align: center;
		padding: 5px 0px;
	}
	
	.recommmend_list ul .mcli .img_back {
		position: relative;
	}
	.recommmend_list ul .mcli .img_back img {
		display: block;
	}
	
	.recommmend_list ul .mcli .img_back .update_chapters {
		background-color: rgba(0,0,0,0.3);
		padding: 5px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		color: white;
		text-align: center;
	}
</style>
